<!DOCTYPE html>
<html>
    <head>
        <title>Pick-up Game</title>
        <link rel="stylesheet" href="index.css" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
	<script>
	    $(document).ready(function(){
		$("#regform").validate({
			rules: {
				  cpassword: { equalTo: "#password" }
				}
			})
	    });
	</script>
	<script type="text/javascript">
		    function getXMLHttp()
		    {
		      var xmlHttp

		      try
		      {
			//Firefox, Opera 8.0+, Safari
			xmlHttp = new XMLHttpRequest();
		      }
		      catch(e)
		      {
			//Internet Explorer
			try
			{
			  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e)
			{
			  try
			  {
			    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			  }
			  catch(e)
			  {
			    alert("Your browser does not support AJAX!")
			    return false;
			  }
			}
		      }
		      return xmlHttp;
		    }
		    
		    function MakeRequest()
			      {
				var xmlHttp = getXMLHttp();
				
				var url = "uniqueUsername.php";
				var params = "username=" + document.getElementById('username').value;
				xmlHttp.open("POST", url+"?"+params, false);
				
				xmlHttp.onreadystatechange = function()
				{
				  if(xmlHttp.readyState == 4)
				  {
				    HandleResponse(xmlHttp.responseText);
				  }
				}
				xmlHttp.send(null);
			      }
			      
			      
			  function HandleResponse(response)
			  {
				if (response == 0) {
					$("#usernameTaken").html("username taken");
				} else {
					$("#usernameTaken").html("");
				}
			  }
			  
		function valids() {
		      MakeRequest();
		      
		      if ($("#usernameTaken").html() == "") {
			      return true;
		      } else {
			      return false;
		      }
		}
	</script>
    </head>

    <body>
        <div id="banner"></div>

        <div id="signup">
            <div id="spacer"></div>
            <div id="centered">
                <h1 class="h1reg"> A-Team's Pick up Game Web Service</h1>
                <p class="preg">
                    Welcome to U of T's Pick Up Game Service. Registration is completely free. Come join a hip new community dedicated to playing your favourite games!
                </p>
                <br>
                <form action="registeruser.php" method="post" name="regform" id="regform">
                    <fieldset>
                        <legend>Register</legend>
                        <table>
                            <tr><td><label for="username">Username </label></td>
                                <td><input 
                                        type="text" 
                                        name="username"
                                        id="username" class="required" /><label id="usernameTaken"></label></td></tr>
                            <tr><td><label for="password">Password </label></td>
                                <td><input
                                        type="password"
                                        id="password"
                                        name="password" class="required"/></td></tr>
                            <tr><td><label for="cpassword">Confirm Password </label></td>
                                <td><input
                                        type="password"
                                        id="cpassword"
                                        name="cpassword"/></td></tr>
                            <tr><td><label for="email">Email </label></td>
                                <td><input
                                        type="text"
                                        id="email"
                                        name="email" class="required email"/></td></tr>
                            <tr><td><label for="firstname">First Name </label></td>
                                <td><input
                                        type="text"
                                        id="firstname"
                                        name="firstname" class="required"/></td></tr>
                            <tr><td><label for="lastname">Last Name </label></td>
                                <td><input
                                        type="text"
                                        id="lastname"
                                        name="lastname" class="required"/></td></tr>
                            <tr><td><label for="birthday">Birthday </label></td>
                                <td><input
                                        type="text"
                                        id="birthday"
                                        name="birthday" class="required date"/></td></tr>
                            <tr><td><label for="gender">Gender </label></td>
                                <td>Male<input
                                        type="radio"
                                        name="gender"
                                        id="mradio"
                                        value="male"
                                        checked
                                        />
                                    Female<input
                                        type="radio"
                                        name="gender"
                                        id="fradio"
                                        value="female"
                                        /></td>
                            </tr>
                            <tr><td><input id="send" name="send" type="submit" value="Register Now!" onClick="return valids();"/></td></tr>                   
                        </table>
                    </fieldset>
                </form>
            </div>
        </div>

        <div id="login">
            <div id="spacerLogin"></div>
            <div id="centered">
                <h1>Sign In</h1>
                <form action="login.php" method="post">
                    <table>
                        <tr>
                            <td>Username</td>
                            <td><input type="text" name="username" size="18" maxlength="80"/></td>
                        </tr>
                        <tr>
                            <td>Password</td>
                            <td><input type="password" name="password"  size="18" maxlength="80"/></td>
                        <input type="hidden" name="func" value="log in" />
                        </tr>
                        <tr><td></td><td><br /><input type="submit" value="login" /></td></tr>
                    </table>
                </form>
            </div>
        </div>



    </body>

</html>
